<div class="layui-fluid">
    <div class="layui-card">
        <input type="hidden" name="title" id="title" value="{$title ?? ''}" placeholder="请输入店铺名称" autocomplete="off"
               class="layui-input">
        <input type="hidden" name="district" id="district" value="{$district ?? ''}" placeholder="请输入店铺名称"
               autocomplete="off" class="layui-input">
        <input type="hidden" name="businessDistrict" value="{$businessDistrict ?? ''}" id="businessDistrict"
               placeholder="请输入店铺名称" autocomplete="off" class="layui-input">
        <div class="layui-card-body">

            <table id="LAY-user-back-manage" lay-filter="LAY-user-back-manage"></table>

        </div>
    </div>
</div>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    var listUrl = "{:url('query/ranking')}";
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'soulTable'], function () {
        var $ = layui.$
            , form = layui.form
            , table = layui.table, soulTable = layui.soulTable;
        let param = $.param({
            'title': $('#title').val(),
            'district': $('#district').val(),
            'businessDistrict': $('#businessDistrict').val()
        });
        table.render({
            elem: "#LAY-user-back-manage", url: listUrl + '?' + param
            , cellMinWidth: 100
            , overflow: {
                type: 'tips'
                // ,hoverTime: 500 // 悬停时间，单位ms, 悬停 hoverTime 后才会显示，默认为 0
                , color: 'white' // 字体颜色
                , bgColor: '#009688' // 背景色
            }
            , cols: [
                [
                    {field: "district", align: "center", title: "所属区域"},
                    {field: "title", align: "center", title: "店名"},
                    {field: "isChainStore", align: "center", title: "直营&加盟"},
                    {field: "businessDistrict", align: "center", title: "商圈"},
                ]]
            , done: function () {
                soulTable.render(this)
            },
            response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                $("#demoReload").val(res.pageToken);
                return {
                    "code": res.code,
                    "count": res.total, //解析数据长度
                    "data": res.data, //解析数据列表
                    "pageToken": res.pageToken
                };

            }
            , id: 'testReload',
            text: {
                'none': "呀！一条数据都没有？"
            },
            page: true,
            limit: 20,
        });

    });
</script>